<docs>
  ## 缴费基数变更
</docs>
<template>
  <div class="fixedBox">
    <mheader type="index" @back_btn="goBack()" title="缴费基数变更"></mheader>
    <!-- 选择地区开始 -->
    <div class="choice">
      <co-form :model="data" :rules="rules" ref="form">
        <co-input
          style="width:80%;"
          class="left"
          prop="jfjs"
          label="缴费基数"
          max-length="100"
          v-model="data.jfjs"
          placeholder="请输入缴费基数"
        ></co-input>
        <span class="left jsClass" @click="computNumber()">计算</span>
      </co-form>
      <!-- 下一步 结束 -->
      <p class="wxts">缴费基数下限为：3613（元）；</p>
      <p class="wxts">缴费基数上限为：23565（元）；</p>
      <div class="moneyClass" v-show="isShow">
        <div class="clearfix">
          <span class="left">
            养老：
            <b>{{money.old}}</b>（元）
          </span>
          <span class="right">
            失业：
            <b>{{money.sy}}</b>（元）
          </span>
        </div>
        <div class="clearfix">
          <span class="left">
            医疗：
            <b>{{money.yl}}</b>（元）
          </span>
          <span class="right">
            月合计：
            <b>{{money.sxhj}}</b>（元）
          </span>
        </div>
        <p>（计算结果仅供参考，实际金额以银行扣款为准）</p>
      </div>
    </div>
    <div class="next-step">
      <button class="btn btn-primary" @click="nextStep">确认变更</button>
    </div>
    <!-- 手机校验 -->
    <message-card :visible.sync="save.visible"
    :title="save.title" :btn-text="save.btnText"
    :btn-type="save.btnType" @btnClick="msgBtn" @iconCloseClick="iconCloseClick"
    :type="save.type=='success' ? 'success' : (save.type=='email'?'email':'fail')">
      <div class="_iphone">
        <co-input
          label="手机号"
          v-model="sjhm"
          @input="changePhone"
          placeholder="请输入"
        ></co-input>
        <div class="clearfix">
          <co-input
            style="width:70%;"
            class="left"
            label="短信验证码"
            max-length="4"
            v-model="sjyzm"
            placeholder="请输入"
            :disabled="yzmDisabled"
          ></co-input>
          <button
            type="button"
            style="width:30%;margin-top:0.25rem;"
            class="left btn btn-primary"
            @click="get_yzm"
            :disabled="disabled"
          >{{yzmCode}}</button>
        </div>
      </div>
    </message-card>
  </div>
</template>
<script>
import Mheader from "@/ldry/group/mheader/mheader";
import coForm from "@/base/form/form";
import coInput from "@/base/form/input";
import coSelect from "@/base/form/select";
import $ from "common/js/axios";
import { validator } from "common/js/valid";
import { mixinValid } from "common/mixins/mixins";
import MessageCard from "@/ldry/group/messageCard/messageCard";

export default {
  components: { coForm, MessageCard, coInput, coSelect, Mheader },
  name: "reverseOne",
  mixins: [mixinValid],
  data() {
    return {
      yzmCode: "获取验证码",
      yzmDisabled:true,
      disabled: true,
      sjhm:"",
      sjyzm:"",
      save: {
        type: "email",
        btnText: "确定",
        btnType: "primary",
        title: "手机验证",
        visible: true
      },
      isShow: false,
      data: {
        jfjs: ""
      },
      money: {
        old: "",
        sy: "",
        yl: "",
        sxhj: ""
      },
      rules: {
        jfjs: validator('5,"number","缴费基数",false')
      }
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    // 查询就业工种
    computNumber() {
      this.$refs.form.validate(() => {
        let jfjs = this.data.jfjs;
        if (parseInt(jfjs) < 3613 || parseInt(jfjs) > 23565) {
          this.isShow = false;
          this.$alert({
            type: "warning",
            message: "缴费基数在3613到23565之间！"
          });
          return false;
        }
        this.isShow = true;
        this.money = {
          old: (parseInt(jfjs) * 0.2).toFixed(2),
          sy: (parseInt(jfjs) * 0.012).toFixed(2),
          yl: "453.82",
          sxhj: (
            parseInt(jfjs) * 0.2 +
            parseInt(jfjs) * 0.012 +
            453.82
          ).toFixed(2)
        };
      });
    },
    // 下一步操作
    nextStep() {
      let _this = this;
      this.$refs.form.validate(() => {
        _this.$loading = true;
        $.post("/dafwgl/bxxxxg/jfjsxgBc", {
          xghjfjs: _this.data.jfjs
        })
          .then(res => {
            let _res = res.returnData;
            if (+_res.executeResult == 1) {
              _this.$alert({
                type: "success",
                message: "操作成功!",
                cb: function() {
                  _this.goBack();
                }
              });
            } else {
              _this.$alert({
                type: "warning",
                message: _res.message
              });
              return false;
            }
          })
          .finally(() => {
            _this.$loading = false;
          });
      });
    },
    echo() {
      $.get("/dafwgl/personal/xxxg").then(res => {
        let _res = res.returnData;
        if (+_res.executeResult == 1) {
          var _data = _res.cbxx;
          if (_data.jfjs) {
            this.data.jfjs = _data.jfjs;
            this.$nextTick(() => {
              this.computNumber();
            });
          }
        } else {
          this.$alert({
            type: "warning",
            message: _res.message
          });
          return false;
        }
      });
    },
    // 获取验证码
    get_yzm() {
      var _flag = 1
      var exc = /^1\d{10}$/;
      if (!exc.test(this.sjhm)) {
        this.$alert({
          type: "warning",
          message: "手机号码格式不正确!"
        });
        return;
      }
      if (_flag != 1) return
      $.get("/dafwgl/personal/fsdx", {
        params: {
          ylsjh: this.sjhm,
          code:'1'
        }
      })
        .then(res => {
          _flag = 0
          let _res = res.returnData;
          if (+_res.executeResult == 0) {
            this.$alert({
              type: "warning",
              message: _res.message
            });
            return false;
          }
          this.timeout();
        })
        .finally();
    },
     timeout() {
      let count = 60;
      let _this = this;
      _this.disabled = true;
      var countdown = setInterval(function() {
        _this.yzmCode = count + "s";
        if (count == 0) {
          _this.yzmCode = "发送验证码";
          _this.disabled = false;
          clearInterval(countdown);
        }
        count--;
      }, 1000);
    },
    // 输入手机校验预留手机方法
    changePhone(){
      if (this.sjhm.length < 11) return
      var exc = /^1\d{10}$/;
      if (!exc.test(this.sjhm)) {
        this.$alert({
          type: "warning",
          message: "手机号码格式不正确!"
        });
        return;
      }
      var _flag = 1
      if(_flag != 1) return
      $.post('/dafwgl/personal/checkSjh',{ylsjh: this.sjhm}).then((res) => {
        var data = res.returnData;
        _flag = 0
        if (data.executeResult == '0') {
          this.$alert({
            type: "warning",
            message: data.message
          });
          return;
        }else{
          this.disabled = false;
          this.yzmDisabled = false;
         }
      }).catch(() => {});
    },
    // 消息按钮点击处理
    msgBtn() {
      var _this = this;
      if(this.save.type == 'email'){
        if (this.sjyzm == "") {
          this.$alert({
            type: "warning",
            message: "验证码不能为空!"
          });
          return
        }
        if (this.sjyzm.length < "4") {
          this.$alert({
            type: "warning",
            message: "验证码长度必须是4位!"
          });
          return
        }
        let _data = {
          ylsjh:this.sjhm,
          sjyzm:this.sjyzm
        }
        var _flag = 1
        if(_flag != 1) return
        $.post('/dafwgl/personal/checkSjyzm',_data).then((res) => {
          _flag = 0
          var data = res.returnData;
          if (data.executeResult == 0) {
            this.$alert({
              type: "warning",
              message: data.message
            });
            return;
          }else{
            _this.save.visible = false;
            _this.yzmCode = "发送验证码";
          }
        }).catch(() => {});
      }
    },
    // 点击×返回到首页
    iconCloseClick() {
      if (this.save.type == "email") {
        this.$router.push({ name: "dbbgdbbg" });
      }
    },
  },
  created() {
    this.echo();
  }
};
</script>
<style lang="scss" scoped>
@import "~common/scss/variable.scss";
.choice {
  border: $border;
  padding: $padding-base;
  background-color: #fff;
  // margin-top: $margin-base;
  border: $border;
  font-size :$font-size-base;
}
.next-step {
  margin-top: $margin-base * 5;
  width: 100%;
  box-sizing: border-box;
  padding: $padding-base;
  .btn {
    width: 100%;
  }
}
.wxts {
  padding: 0.15rem;
  font-size: 0.35rem;
  color: #ffa149;
}
.jsClass {
  width: 20%;
  padding: 71px 0;
  text-align: center;
  background: $color-base;
  color: #ffffff;
  font-size: $font-size-large;
}
.moneyClass {
  margin: 20px auto;
  padding: 15px 0 15px 20px;
  background: #f5f9ff;
  border: 1px solid #dbdbdb;
  border-radius: $radius-base;
  div {
    margin: 50px 0;
    span {
      width: 50%;
      color: #808080;
      b {
        color: #3d5798;
      }
    }
  }
  p {
    color: #ffa149;
    text-align: center;
    margin: 10px 0;
    font-size: 0.35rem;
  }
}
</style>
